<template>
  <div>练习页面：vuex
    <div>{{ msg }}</div>
    <div>mapState辅助函数的生成的message:{{ message }}</div>
    <div>mapGetters辅助函数的生成的nickName+money:{{ nickName }}+{{ money }}</div>
    <div>全局的vuex数据：{{ $store.state.message }}</div>
    <div>全局vuex的getter属性：{{ $store.getters.nickName }},余额:{{ $store.getters.money }}</div>
    <div><button @click="changeFn">修改全局的state</button></div>
    <div><button @click="changeFnSync">异步修改全局的state</button></div>
    <div>模块的vuex数据：{{ $store.state.user.message }}</div>
    <div>模块vuex的getter属性：{{ $store.getters.uname }},余额:{{ $store.getters.usermoney }}</div>
    <div><button @click="changeUserFn">修改user的state</button></div>
    <div><button @click="changeUserFnSync">异步修改user的state</button></div>
    <div>
      vuex关键的五句话：
      1.定义vuex数据在state下定义
      2.修改state的数据只能通过mutations定义的方法修改
      3.如果是异步修改，必须通过actions调用mutations修改
      4.通过commit调用mutations
      5.通过dispatch调用actions
    </div>
    <!-- VUE2中动态新增(删除)的属性不会响应式更新UI界面 -->
    <div>
      用户信息:{{ userInfo.name }}+{{ userInfo.age }}+{{ userInfo.gender }}
      <button @click="addGender">给userInfo新增一条gender属性</button>
      <button @click="delGender">给userInfo删除一条gender属性</button>
    </div>
    <!-- 导入excel并解析数据 -->
    <div>
      <input type="file" @change="importExcel">
    </div>

    <!-- 高阶组件的使用练习(了解) -->
    <div>高阶组件的使用练习</div>
    <HighLevelComp perms="park:enterprise:add_edit">
      <button>新增按钮</button>
      <template #footer>
        <div>我是footer插槽的内容</div>
      </template>
    </HighLevelComp>

  </div>
</template>

<script>
// 1.引入对应的辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { read, utils } from 'xlsx'
export default {
  data() {
    return {
      msg: '我是data的message',
      // VUE2原理-> Object.defineProperty(userInfo)
      // 通过Object.defineProperty进行数据劫持，对对象的每个属性进行深度监听，一旦属性变化，就会出发UI界面的更新
      userInfo: {
        name: '张三',
        age: 18,
        gender: '男'
      }
    }
  },
  computed: {
    // 使用频率不高
    ...mapState({
    // 自己定义一个计算属性名
      message: state => state.message
    }),
    // 简写：
    // ...mapGetters(['nickName', 'money'])
    // 完整写法：
    ...mapGetters({
      'nickName': state => state.user.uname
    })
  },
  methods: {
    // mapMutations的辅助函数写法：
    ...mapMutations('user', {
      'changeUserMessage': 'changeMessage'
    }),
    ...mapActions('user', {
      'changeUserMessageSync': 'changeMessageSync'
    }),
    // 上面的代码可以理解成：
    // changeUserMessageSync() {
    //   this.$store.dispatch('user/changeMessageSync')
    // },
    // 全局的vuex修改
    changeFn() {
      // 这样改vuex实际上不会更新，只会让页面更新
      // this.$store.state.message = '111'
      // 调用vuex的mutations中的方法进行state修改
      // this.$store.commit('changeMessage')
      // 将当前的时间戳修改为message
      // this.$store.commit('changeMessage', Date.now())
      this.changeUserMessage(Date.now())
    },
    changeFnSync() {
      // 将当前的时间戳修改为message
      // this.$store.dispatch('changeMessageSync')
      // this.$store.dispatch('changeMessageSync', Date.now())
      this.changeUserMessageSync(Date.now())
    },
    // user模块的vuex修改
    changeUserFn() {
      // 不要在页面直接修改state的数据，state的数据只能用mutations修改
      // this.$store.state.user.message = '111'
      // user/changeMessage 需要开启命名空间
      // 如果不开命名空间，就像调用全局一样调用模块就好了
      this.$store.commit('user/changeMessage')
    },
    changeUserFnSync() {
      this.$store.dispatch('user/changeMessageSync')
    },
    // 动态新增属性
    addGender() {
      // 如果原来有，这个赋值叫修改，如果没有，这个赋值就是新增
      this.userInfo.gender = '男'
      // 推荐写法：最好是改整个对象，而不是某一条属性
      this.userInfo = {
        ...this.userInfo,
        gender: '男'
      }
    },
    delGender() {
      delete this.userInfo.gender
      // 推荐写法：最好是改整个对象，而不是某一条属性
      const data = {
        ...this.userInfo
      }
      delete data.gender
      // 更新对象本身而不是某一条属性
      this.userInfo = data
      console.log(this.userInfo)
    },
    // 导入excel并解析数据
    async importExcel(e) {
      // 1.获取文件对象
      const file = e.target.files[0]
      // 2.将文件转成buffer
      const buffer = await file.arrayBuffer()
      // 3.将buffer转成workbook对象
      const workbook = read(buffer)
      // xlsx文件相关的内容
      console.log(workbook)
      // 4.获取第一个sheet
      const worksheet = workbook.Sheets[workbook.SheetNames[0]]
      // 5.将sheet转成json
      const raw_data = utils.sheet_to_json(worksheet, { header: 1 })
      console.log(raw_data)
    }
  }
}
</script>

<style>

</style>
